<template>
  <div class="detail">
    <div class="detailTop">
      <van-swipe class="my-swipe" lazy-render :show-indicators="isshow">
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" style="width: 100%; height: 100%; object-fit: contain;" />
        </van-swipe-item>
      </van-swipe>
      <div class="detailPrice">
        <div class="price">
          <div class="priceFu">￥</div>
          <div class="pricePr">{{ goodsDetail.price }}</div>
          <div class="priceYh">优惠价</div>
        </div>
        <div class="sales">已售{{ goodsDetail.num }}</div>
      </div>
      <div class="detailName">
        {{ goodsDetail.name }}
      </div>
    </div>
    <div class="detailContent" style="margin-top: 0.5rem;">
      <div class="detailContentTitle">
        <van-tabs v-model="active" :sticky="true">
          <van-tab title="商品详情" />
          <van-tab title="商品评价" />
          <van-tab title="商品参数" />
        </van-tabs>
      </div>
      <div class="detailContentCon">
        <van-tabs-panels v-model="active">
          <van-tab-panel>
            <div class="detailContentConText">
              <van-empty description="暂无内容" />
              <van-empty description="暂无内容" />
            </div>
          </van-tab-panel>
        </van-tabs-panels>
      </div>
    </div>

    <div class="detailFoot">
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" @click="router.push({path: '/shopping'})"/>
        <van-action-bar-icon icon="cart-o" text="购物车" @click="router.push({path: '/live'})"/>
        <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onActivated, onDeactivated } from "vue";
import { useRoute, useRouter } from "vue-router";
import http from "@/common/api/request";
let isshow = ref(true);
const images = ref([]);
// 保存原始图片数组
const originalImages = [
  "/images/list-1.webp",
  "/images/list-2.webp",
  "/images/list-3.webp",
  "/images/list-4.webp",
];
images.value = [...originalImages];

// 当组件被缓存并离开时触发（例如使用 keep-alive）
onDeactivated(() => {
  images.value = [...originalImages]; // 重置为原始图片
});
const router = useRouter();
let route = useRoute();
let goodsDetail = ref({});
let id = ref(0);
const goData = async () => {
  let goodsId = ref(route.query.id);
  let res = await http.$axios({
    url: "/api/goods/id",
    params: {
      id: goodsId.value,
    },
  });
  console.log("详情数据", res);
  goodsDetail.value = res;
  images.value.unshift(goodsDetail.value.imgUrl);
};
onActivated(() => {
  // 判断当前url里的id和之前的id是否一致
  if (route.query.id !== id.value) {
    goData();
    id.value = route.query.id;
  }
});
onMounted(() => {
  goData();
  id.value = route.query.id;
});

import { showToast } from "vant";
const addCart = () => {
  let id = route.query.id;
  http
    .$axios({
      url: "/api/addCart",
      method: "POST",
      data: {
        goodsId: id,
      },
      headers: {
        token: true,
      },
    })
    .then((res) => {
      console.log("添加购物车", res);
      if (res.success) {
        showToast(res.msg);
        router.push({
          path: "/home",
        }); // 跳转到购物车页面
      }
    })
    .catch((error) => {
      // showToast(error.msg);
      console.error("添加购物车失败", error);
    });
};
</script>

<style scoped>
.detail {
  background-color: #F6F6F6;
}

.detail .detailTop .my-swipe .van-swipe-item {
  width: 100%;
  height: 10.375rem;
  text-align: center;
}

.detail .detailTop .detailPrice {
  width: 100%;
  /* background-color: red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6375rem 0.325rem 0.325rem 0.325rem;
  box-sizing: border-box;
}

.detail .detailTop .detailPrice .price {
  display: flex;
  align-items: center;
}

.detail .detailTop .detailPrice .price .priceFu {
  font-size: 0.375rem;
}

.detail .detailTop .detailPrice .price .pricePr {
  font-weight: 600;
  font-size: 0.375rem;
}

.detail .detailTop .detailPrice .price .priceYh {
  font-size: 0.3125rem;
  margin-left: 0.1875rem;
  background-color: rgb(255, 236, 239);
  color: rgb(255, 68, 102);
  padding: 0.0625rem 0.0625rem;
}

.detail .detailTop .detailPrice .sales {
  font-size: 0.375rem;
  color: #666;
}

.detail .detailTop .detailName {
  padding: 0rem 0.325rem 0.325rem 0.325rem;
  font-size: 0.4375rem;
}

.detail .detailFoot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  /* background-color: red; */
}

.detail .detailFoot .item {
  width: 50%;
  text-align: center;
  line-height: 1rem;
  height: 100%;
  font-size: 0.4375rem;
}

.detail .detailFoot .add {
  background-color: rgb(255, 236, 239);
  color: rgb(255, 68, 102);
}

.detail .detailFoot .buy {
  background-color: rgb(255, 87, 119);
  color: rgb(255, 255, 255);
}
</style>
